@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2+px;
}
html {
    width: 100%;
    height: 100%;
    background: url(../img/banggou-4.png);
}

.mobile {
    header {
        display: flex;
        width: 100%;
        height: p(88);
        background: #0f0f0f;
        justify-content: space-around;
        align-items: center;
        .fan {
            display: flex;
            margin-left: p(-20);
            .hui {
                width: p(24);
                height: p(44);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            p {
                margin-top: p(-3);
                margin-left: p(16);
                a {
                    font-size: p(28);
                    color: #fff;
                }
            }
        }
        h1 {
            font-size: p(36);
            color: #fff;
            font-weight: normal;
        }
        .ce {
            width: p(6);
            height: p(34);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
    }
    .test {
        width: 100%;
        height: p(648);
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    section {
        .web {
            background: #fff;
            border-bottom: p(1) solid #e5e5e5;
            .test2 {
                background: #fff;
                padding-top: p(28);
                h1 {
                    height: p(30);
                    font-size: p(30);
                    color: #5c5c5c;
                    font-weight: normal;
                    margin-left: p(50);
                }
                .test1 {
                    margin-top: p(20);
                    display: flex;
                    justify-content: space-around;
                    p {
                        width: p(420);
                        font-size: p(26);
                        color: #5c5c5c;
                        position: relative;
                        &::after {
                            position: absolute;
                            left: p(478);
                            top: p(30);
                            content: "";
                            height: p(86);
                            border: p(2) solid #e5e5e5;
                        }
                    }
                    .s {
                        align-self: center;
                        .c {
                            width: p(42);
                            height: p(40);
                            overflow: hidden;
                            img {
                                width: 100%;
                            }
                        }
                        span {
                            font-size: p(20);
                            color: #5c5c5c;
                        }
                    }
                }
            }
            .jia {
                display: flex;
                justify-content: space-around;
                margin-top: p(70);
                .wei {
                    h1 {
                        font-size: p(28);
                        color: #e30202;
                        margin-bottom: p(20);
                    }
                    .xai {
                        margin-bottom: p(15);
                         background: #fff;
                        span {
                            font-size: p(24);
                            color: #6b6b6b;
                        }
                        select {
                            width: p(160);
                            height: p(50);
                            border: p(1) solid #6b6b6b;
                            color: #5c5c5c;
                            font-size: p(20);
                            margin-left: p(36);
                            background:transparent;
                        }
                    }
                    .shul {
                        display: flex;
                        .li {
                            text-align: center;
                            .spa {
                                font-size: p(24);
                                color: #6b6b6b;
                            }
                            p {
                                font-size: p(18);
                                color: #6b6b6b;
                            }
                        }
                        input {
                            padding-left: p(10);
                            width: p(160);
                            height: p(50);
                            border: p(1) solid #6b6b6b;
                            margin-top: p(18);
                            margin-left: p(22);
                        }
                    }
                    .p1 {
                        margin-top: p(30);
                        font-size: p(20);
                        color: #6b6b6b;
                    }
                }
                .xlj {
                    p {
                        font-size: p(20);
                        color: #6b6b6b;
                        span {
                            font-size: p(20);
                            color: #5ea6d2;
                        }
                    }
                    ul {
                        li:nth-child(1) {
                            a {
                                margin-top: p(16);
                                display: inline-block;
                                width: p(147);
                                height: p(61);
                                background: #38e859;
                                border-radius: p(7);
                                font-size: p(19);
                                color: #fff;
                                text-align: center;
                                line-height: p(61);
                            }
                        }
                        li:nth-child(2) {
                            a {
                                display: inline-block;
                                margin-top: p(7);
                                width: p(147);
                                height: p(61);
                                background: #f6ac2b;
                                border-radius: p(7);
                                font-size: p(19);
                                color: #fff;
                                text-align: center;
                                line-height: p(61);
                            }
                        }
                        li:nth-child(3) {
                            a {
                                margin-top: p(7);
                                display: inline-block;
                                width: p(147);
                                height: p(61);
                                background: #f85c5c;
                                border-radius: p(7);
                                font-size: p(19);
                                color: #fff;
                                text-align: center;
                                line-height: p(61);
                            }
                        }
                    }
                }
            }
            .hen {
                margin: auto;
                margin-top: p(8);
                margin-bottom: p(15);
                width: 93.75%;
                border: p(3) solid #e5e5e5;
                ;
            }
        }
        .foot {
//          height: p(730);
            margin-top: p(19);
            background: #fff;
            border-top: p(1) solid #d2d0d3;
            overflow: hidden;
            ul {
                display: flex;
                label {
                    flex: auto;
                    .l{
                        width: 100%;
                        height: p(75);
                        font-size: p(28);
                        color: #515151;
                        border: p(1) solid #d2d0d3;
                        background: #e7e7e7;
                        text-align: center;
                        line-height: p(75);
                    }
                    .z{
                        width: 100%;
                        height: p(75);
                        font-size: p(28);
                        color: #515151;
                        border: p(1) solid #d2d0d3;
                        background: #e7e7e7;
                        text-align: center;
                        line-height: p(75);
                    }
                    .o{
                        width: 100%;
                        height: p(75);
                        font-size: p(28);
                        color: #515151;
                        border: p(1) solid #d2d0d3;
                        background: #e7e7e7;
                        text-align: center;
                        line-height: p(75);
                    }
                }
            }
            .niha{
                 height: 0;
                overflow: hidden;
                p{
                    font-size: p(26);
                    color: #5c5c5c;
                    margin-top: p(5);
                }
            }
            .nihav{
                 height: 0;
                overflow: hidden;
                p{
                    font-size: p(26);
                    color: #5c5c5c;
                    margin-top: p(5);
                }
            }
            .nihan{
                 height: 0;
                overflow: hidden;
                p{
                    font-size: p(26);
                    color: #5c5c5c;
                    margin-top: p(5);
                }
            }
            #ceh {
                display: none;
            }
              #cehc {
                display: none;
            }
              #cehv {
                display: none;
            }
            #ceh:checked~ul .l{
                color: #ff4b4b;
                border: none;
                background: #fff;
            }
             #cehc:checked~ul .z{
                color: #ff4b4b;
                border: none;
                background: #fff;
            }
             #cehv:checked~ul .o{
                color: #ff4b4b;
                border: none;
                background: #fff;
            }
          
            #ceh:checked~.niha {
                height: p(650);
                transition-duration: 0.5s;
            }
             #cehc:checked~.nihav {
                   height: p(650);
                transition-duration: 0.5s;
            }
             #cehv:checked~.nihan {
                   height: p(650);
                transition-duration: 0.5s;
            }
        }
    }
}